<template>
    <el-skeleton style="width: 100%; margin-top: 20px;" animated >
        <template slot="template">
        <div>
            <el-skeleton-item variant="h1" style="width: 10%" />
        </div>
        <el-skeleton-item variant="p" style="width: 20%; margin-top: 20px;" />
        <div style="margin-top: 20px;">
            <el-skeleton-item variant="h1" style="width: 10%" />
        </div>

        <div style="display: flex; margin-top: 30px;">
            <el-skeleton-item variant="image" style="width: 220px; height: 110px; margin-right: 20px;" />
            <el-skeleton-item variant="image" style="width: 240px; height: 110px;" />
        </div>

        <div style="margin-top: 30px;">
            <el-skeleton-item variant="h1" style="width: 10%" />
            <el-skeleton-item variant="span" style="width: 10%; margin: 0 30px;" />
            <el-skeleton-item variant="span" style="width: 10%; margin-right: 30px;" />
            <el-skeleton-item variant="span" style="width: 10%" />
        </div>

        <div style="display: flex; margin-top: 30px;">
            <el-skeleton-item variant="image" style="width: 180px; height: 200px; margin-right: 20px;" />
            <el-skeleton-item variant="image" style="width: 180px; height: 200px; margin-right: 20px;" />
            <el-skeleton-item variant="image" style="width: 180px; height: 200px; margin-right: 20px;" />
            <el-skeleton-item variant="image" style="width: 180px; height: 200px; margin-right: 20px;" />
            <el-skeleton-item variant="image" style="width: 180px; height: 200px; margin-right: 20px;" />
        </div>

        <div style="margin-top: 30px;">
            <el-skeleton-item variant="h1" style="width: 10%" />
            <el-skeleton-item variant="span" style="width: 10%; margin: 0 30px;" />
        </div>

        <div style="margin-top: 30px;">
            <el-skeleton-item variant="text " style="width: 200px; height: 120px; margin-right: 20px;" />
            <el-skeleton-item variant="text " style="width: 200px; height: 120px; margin-right: 20px;" />
            <el-skeleton-item variant="text " style="width: 200px; height: 120px; margin-right: 20px;" />
        </div>

        <div style="margin-top: 30px;">
            <el-skeleton-item variant="text " style="width: 200px; height: 120px; margin-right: 20px;" />
            <el-skeleton-item variant="text " style="width: 200px; height: 120px; margin-right: 20px;" />
            <el-skeleton-item variant="text " style="width: 200px; height: 120px; margin-right: 20px;" />
        </div>

        <div style="display: flex; margin-top: 30px;">
            <el-skeleton-item variant="image" style="width: 180px; height: 200px; margin-right: 20px;" />
            <el-skeleton-item variant="image" style="width: 180px; height: 200px; margin-right: 20px;" />
        </div>

        <div style="margin-top: 30px;">
            <el-skeleton-item variant="h1" style="width: 32%" />
        </div>

        <div style="margin-top: 30px;">
            <el-skeleton-item variant="h1" style="width: 10%" />
        </div>

        <div style="margin-top: 30px;">
            <el-skeleton-item variant="text" style="width: 50px;" />
        </div>

        <div style="margin-top: 30px;">
            <el-skeleton-item variant="text" style="width: 100px;" />
        </div>

        <el-skeleton-item style="margin-top: 30px; width: 100px;" variant="button" />

        </template>
    </el-skeleton>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>

</style>
